<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>码猿学习网-课程学习</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="sweetAlert/sweetalert.css">
    <link rel="ICON" href="image/projectImage/icon1.png">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
</head>
<body style="background-color: #f8f8f8">
<header id="header-box">
    <nav class="navbar navbar-default m-b-0"  >
        <div class="container-fluid"  >
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header" >
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="./my_home">码猿</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="./my_home"><i class="fa fa-home m-r-5"></i>主页</a></li>
                    <li><a href="./my_library"><i class="fa fa-book m-r-5"></i>博客</a></li>
                    <li class="active"><a href="./externalLink"><i class="fa fa-map-signs m-r-5"></i>外链</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right" th:if="${#httpServletRequest.remoteUser}==null">
                    <li><a href="./userLogin">未登录</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right" th:if="${#httpServletRequest.getAttribute('Username')}!=null">
                    <li class="dropdown">
                        <a href="javascript:" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="padding: 9px 15px">[[${#httpServletRequest.getAttribute("Username")}]]<img class="m-l-5" th:src="'./image/userImage/'+${#httpServletRequest.remoteUser}+'/userInfo.png'" alt=""><span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a th:href="'./userInfo?userAccount='+${#httpServletRequest.remoteUser}">用户信息</a></li>
                            <li><a href="./changePassword">修改密码</a></li>
                            <li><a th:href="'./writeArticle?userAccount='+${#httpServletRequest.remoteUser}">发布博客</a></li>
                            <li>
                                <form class="p-0" style="color: #4c4c4c;cursor: pointer;" th:action="@{./logout}" method="post" id = "logoutForm">
                                    <a style="color: #333; padding: 3px 20px" onclick="javascript:$('#logoutForm').submit()"/>退出登录</a>
                                </form>
                            </li>
                        </ul>
                    </li>
                </ul>
                <div class="navbar-form navbar-right">
                    <div class="input-group">
                        <input type="text" class="form-control"  placeholder="Search" v-model="researchText">
                        <span class="input-group-addon btn btn-info" v-on:click="researchUrl='./researchPage';research_btn()"><i class="fa fa-search"></i></span>
                    </div>
                </div>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="Sidebar">
        <a href="/my_home" title="码猿主页"><i class="fa fa-home fa-lg"></i></a>
        <a href="javascript:;" class="stick" title="置顶" style="display: none"><i class="fa fa-eject"></i></a>
    </div>
</header>

<div class="center clear"  id="center-box">
    <div class="jumbotron masthead m-b-0 library-jumbotron">
        <div class="container text-center">
            <h1>码猿博客</h1>
            <h2>欢迎来到码猿博客！一个专门为你提供大神文章的博客网站</h2>
        </div>
    </div>
    <div class="bc-social">
        <div class="container">
            <ul class="bc-social-buttons library-bc-button">
                <li v-bind:class="{'active':libraryType==''}" v-on:click="libraryType='';currentPage=1;retrieveData()">全部</li>

                <li v-bind:class="{'active':libraryType=='移动开发'}" v-on:click="libraryType='移动开发';currentPage=1;retrieveData()">移动开发</li>

                <li v-bind:class="{'active':libraryType=='云计算/大数据'}" v-on:click="libraryType='云计算/大数据';currentPage=1;retrieveData()">云计算/大数据</li>

                <li v-bind:class="{'active':libraryType=='编程语言'}" v-on:click="libraryType='编程语言';currentPage=1;retrieveData()">编程语言</li>

                <li v-bind:class="{'active':libraryType=='数据库'}" v-on:click="libraryType='数据库';currentPage=1;retrieveData()">数据库</li>

                <li v-bind:class="{'active':libraryType=='软件工程'}" v-on:click="libraryType='软件工程';currentPage=1;retrieveData()">软件工程</li>

                <li v-bind:class="{'active':libraryType=='前端开发'}" v-on:click="libraryType='前端开发';currentPage=1;retrieveData()">前端开发</li>

                <li v-bind:class="{'active':libraryType=='智能硬件'}" v-on:click="libraryType='智能硬件';currentPage=1;retrieveData()">智能硬件</li>

                <li v-bind:class="{'active':libraryType=='理论基础'}" v-on:click="libraryType='理论基础';currentPage=1;retrieveData()">理论基础</li>

                <li v-bind:class="{'active':libraryType=='操作系统'}" v-on:click="libraryType='操作系统';currentPage=1;retrieveData()">操作系统</li>

                <li v-bind:class="{'active':libraryType=='综合应用'}" v-on:click="libraryType='综合应用';currentPage=1;retrieveData()">综合应用</li>

            </ul>
        </div>
    </div>
    <div id="card-box">
        <div class="container library-box p-0">
            <div class="catalog-title">
                <h3 class="m-t-0">外链目录</h3>
            </div>
            <div class="loading text-center" v-show="bool_loading">
                <img src="./../image/projectImage/loading.gif" alt="" width="250">
            </div>
            <div class="row m-0 text-center" v-show="!bool_loading" v-cloak>
                <div class="col-sm-6 col-md-4 col-lg-4" v-for="externalLink in externalLink">
                    <div class="thumbnail">
                        <a class="caption p-0 m-0"  v-bind:href="'.'+externalLink.libraryListUrl">
                            <div class="thumbnail-img">
                                <div class="img-box">
                                    <img class="lazy" v-bind:src="externalLink.libraryImg" alt="" width="80" height="80">
                                </div>
                            </div>
                            <div class="caption-title">
                                <h3>{{externalLink.libraryName}}</h3>
                                <span>关注人数：115</span>
                            </div>
                            <div class="btn-box">
                                <a v-bind:href="'.'+externalLink.libraryListUrl" class="btn btn-info">进入目录</a>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="row m-0 p-b-30 text-center" v-cloak>
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li v-if="currentPage>1">
                            <a href="javaScript:;" aria-label="Previous" v-on:click="currentPage--,retrieveData();">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li disabled="disabled" v-else>
                            <a href="javaScript:;" class="button">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li class="page-1" v-for="index in indexs" v-bind:class="{'active': currentPage === index}">
                            <a href="javaScript:;" class="button" :value="index" v-if="currentPage === index">{{index}}</a>
                            <a href="javaScript:;" class="button" :value="index" v-on:click="currentPage = index,retrieveData();" v-else>{{index}}</a>
                        </li>
                        <li v-if="currentPage<totalPages">
                            <a href="javaScript:;" aria-label="Next" v-on:click="currentPage++,retrieveData();">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        <li disabled="disabled"  v-else >
                            <a href="javaScript:;" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>

<footer class="footer">
    <div class="container text-center">
        <div class="row footer-top m-t-35">
            <div class="footer-icon">
                <a href="#" class="m-r-25" title="新浪微博"><i class="fa fa-weibo fa-2x"></i></a>
                <a href="javascript:;" class="m-r-25" title="微信"><i class="fa fa-weixin fa-2x"></i></a>
                <a href="javascript:;" class="m-r-25" title="腾讯QQ"><i class="fa fa-qq fa-2x"></i></a>
                <a href="#" title="Github"><i class="fa fa-github-alt fa-2x"></i></a>
            </div>
        </div>
        <div class="footer-link m-t-5">
            <!-- <a href="/about/us" target="_blank" title="关于我们">关于我们</a> -->
            <a href="#" target="_blank" title="企业合作" class="m-r-25">企业合作</a>
            <a href="#" target="_blank" title="人才招聘" class="m-r-25">人才招聘</a>
            <a href="#" target="_blank" title="联系我们" class="m-r-25">联系我们</a>
            <a href="#" target="_blank" title="讲师招募" class="m-r-25">讲师招募</a>
            <a href="#" target="_blank" title="常见问题" class="m-r-25">常见问题</a>
            <a href="#" target="_blank" title="意见反馈" class="m-r-25">意见反馈</a>
            <a href="#" target="_blank" title="意见反馈" class="m-r-25">慕课大学</a>
            <a href="#" target="_blank" title="友情链接">友情链接</a>
        </div>
        <div class="row footer-bottom">
            <p>ML&nbsp;&nbsp;&copy;&nbsp;2017-2017&nbsp;&nbsp;<a href="my_home.html">码猿学习网</a>&nbsp;&nbsp;版本所有</p>
        </div>
    </div>
</footer>

<script src="js/jquery-3.0.0.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="sweetAlert/sweetalert.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/public.js"></script>

<script>
    var vm_externalLink=new Vue({
        el: "#center-box",
        data: {
            bool_loading: true,//是否在加载数据
            externalLink:'',
            libraryType:'',
            totalPages: "", //页数总量
            currentPage: 1, //当前页
        },
        methods: {
            retrieveData: function() {
                getLibrary();
            },
        },
        computed: {
            indexs: function() {
                var left = 1;
                var right = this.totalPages;
                var ar = [];
                if(this.totalPages >= 7) {
                    if(this.currentPage > 3 && this.currentPage < this.totalPages - 2) {
                        left = this.currentPage - 3;
                        right = this.currentPage + 2
                    } else {
                        if(this.currentPage <= 3) {
                            left = 1;
                            right = 6
                        } else {
                            right = this.totalPages;
                            left = this.totalPages - 5
                        }
                    }
                }
                while(left <= right) {
                    ar.push(left);
                    left++
                }
                return ar
            }
        },
    });

    getLibrary();
    function getLibrary() {
        var JsonStr={
            libraryType:'',
            currentPage:'',
            size:12,
        }
        JsonStr.libraryType=vm_externalLink.libraryType;
        JsonStr.currentPage=vm_externalLink.currentPage-1;
        $.ajax({
            type: 'GET',
            url: './get_all_external_link',
            data: JsonStr,
            success: function (data) {
                console.log(data)
                vm_externalLink.externalLink = data.content;
                vm_externalLink.totalPages = data.totalPages;
                vm_externalLink.bool_loading = false;
            }
        });
    }
</script>
</body>
</html>
